const angle = 0; // 角度，用来做简单的动画效果的
const value = 23; // 图上角度数据
const data = {
  // 标题
  title: [
    {
      text: value + "%",
      x: "center",
      y: "center",
      textStyle: {
        color: "#fff",
        fontSize: 40,
        fontWeight: "bold",
      },
    },
    {
      text: "会员购买比例",
      x: "center",
      top: "55%",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  ],
  series: [
    {
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 1.6) * 0.65,
            startAngle: ((0 + -angle) * Math.PI) / 180,
            endAngle: ((360 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: "#ff6e1b",
            fill: "transparent",
            lineWidth: 1,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      type: "pie",
      radius: ["75%", "60%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: {
        normal: {
          position: "center",
        },
      },
      data: [
        {
          value: value,
          name: "",
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255, 128, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(200, 106, 255, 0.8)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        },
        {
          value: 100 - value,
          name: "",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(237, 119, 55, 0.2)",
            },
          },
        },
      ],
    },
  ],
};

export default data;
